<template>
  <span :class="tagClass" :style="tagStyle" @click="onClick">
    <slot></slot>
  </span>
</template>

<script>
import { RED, BLUE, GREEN, GRAY_DARK } from '../utils/colors'

const COLOR_MAP = {
  danger: RED,
  primary: BLUE,
  success: GREEN
}
export default {
  name: 'my-tag',
  props: {
    size: String,
    type: String,
    mark: Boolean,
    color: String,
    plain: Boolean,
    round: Boolean,
    textColor: String
  },
  computed: {
    tagClass() {
      const {size, mark, round, plain} = this
      let classes = [
        'my-tag',
        `my-tag--${size}`,
        plain && 'my-tag--plain',
        mark && 'my-tag--mark',
        round && 'my-tag--round',
        plain && 'my-hairline--surround',
      ]

      return classes
    },

    tagStyle() {
      const {type, plain, textColor} = this
      const color = this.color || (type && COLOR_MAP[type]) || GRAY_DARK
      const key = plain ? 'color' : 'backgroundColor'
      let style = {
        [key]: color
      }
      if (textColor) {
        style.color = textColor
      }
      return style
    }
  },
  methods: {
    onClick(event) {
      this.$emit('click', event)
    }
  }
}
</script>

<style lang="less">
  @import './tag.less';
</style>
